<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .cal{
            background-color:red;
        }
    </style>

    <script type="text/javascript" src="../js/jquery-1.4.1.js" ></script>
    <script>
        $(function(){
            $(":text").calendar();
        });


        //控件要在$()的外面去写 写好后在$()里面调用1下就行
        //语法 jQuery.fn.extend(object)  注意里面是传1个对象
        $.fn.extend({
            //Shared Calendar in DateBox
            calendar:function(){
                var $cal = $(".cal");
                if($cal.length ==0){
                    $cal=$("<div>").css({
                        //设置div的样式
                        width:"100px",
                        height:"100px",
                        "background-color":"red",
                        border:"1px solid,blue",
                    }).appendTo("body").hide();
                };

                //$(this) 指调用方法的控件
                $(this).click(function(){
                    //当你出现的时候，点击隐藏。而当你隐藏的时候，点击出现
                    $cal.toggle();
                });

            }
        });

    </script>
</head>
<body>

    <!--"2016-10-10"-->
    <input type="text" maxlength="10" style="width: 96px;height: 18px;">

</body>

</html>